<template>
  <div class="familyinformation">
    <button  type="button" class="el-button el-button--text el-button--small" style="float: left; padding: 3px 0px;" @click="handleadd(0,'')" v-if="!disabled"><!----><!----><span>添加家属资料</span></button>
    <el-dialog
      :title="isfrist?'修改家属资料':'添加家属资料'"
      :visible.sync="dialogFormVisible"
      width="500px"
      destroy-on-close
      @close="closeDialog"
    >

      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="联系人姓名" prop="contactName">
          <el-input v-model="form.contactName"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactNumber">
          <el-input v-model="form.contactNumber"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" type="number" min="0" max="120"></el-input>
        </el-form-item>
        <el-form-item label="与老人关系" prop="relationship">
          <el-select v-model="form.relationship"   placeholder="家族关系"  >
            <el-option
              v-for="item in relationships"
              :key="item.dcNo"
              :label="item.name"
              :value="item.dcNo">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="是否第一联系人" prop="first">
          <el-select v-model="form.first"   placeholder="是否第一联系人" v-if="!isfrist"  >
            <el-option
              v-for="item in firsts"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
           <div v-if="isfrist">
                <span v-if="form.first==true">

             <el-tag type="success">是</el-tag>
                </span>
            <span v-if="form.first==false">     <el-tag type="warning">否</el-tag></span>
           </div>
        </el-form-item>
        <el-form-item label="是否同住" prop="cohabit">
          <el-select v-model="form.cohabit"   placeholder="是否同住"  >
            <el-option
              v-for="item in cohabit"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="备注" >
          <el-input v-model="form.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save" >确 定</el-button>
      </div>


    </el-dialog>
    <el-table
      :data="list"
      width="100%"

    >

      <el-table-column
        show-overflow-tooltip
        label="老人编号"
        prop="elderlyCode"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="contactName"
        label="联系人姓名"

      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="contactNumber"
        label="联系电话"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="age"
        label="年龄"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="relationshipName"
        label="与老人关系"

      ></el-table-column>

      <el-table-column label="是否第一联系人" prop="gender">
        <template slot-scope="scope">
                <span v-if="scope.row.first==true">

             <el-tag type="success">是</el-tag>
                </span>
          <span v-if="scope.row.first==false">     <el-tag type="warning">否</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column label="是否同住" >
        <template slot-scope="scope">
                <span v-if="scope.row.cohabit==true">

             <el-tag type="success">是</el-tag>
                </span>
          <span v-if="scope.row.cohabit==false">     <el-tag type="warning">否</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="remark"
        label="备注"

      ></el-table-column>
      <el-table-column label="操作" prop="disabled" v-if="!disabled"  show-overflow-tooltip width="200px">
        <template slot-scope="scope">
          <el-button type="text"  @click="doDelete(scope.$index, scope.row)"  v-if="scope.row.first==false">删除<i class="el-icon-delete"></i></el-button>
          <el-button type="text"  @click="handleadd(scope.row.id, scope.row)"  v-if="scope.row.first==true">修改<i class="el-icon-edit"></i></el-button>
        </template>


      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    import { add,resvre } from "@/api/familyinformation"
    import { search } from "@/api/familyinformation"
    import { del } from "@/api/familyinformation"
    export default {
        name: "familyinformation",
        props: ["elderlyCode","dictionary","disabled"],
        data(){
             return{
                 dialogFormVisible:false,
                 relationships:{

                 },
                 id:0,

                 list:[],
                 isfrist:false,
                 form:{
                     contactName:"",
                     contactNumber:"",
                     elderlyCode:"",
                     first:"",
                     relationship:"",
                     age:"",//年龄
                     remark:"",//备注
                     cohabit:"",//是否同住
                     remake:"",//备注
                 },
                 rules:{
                     age: [{ required: true,trigger: "blur", message: "年龄"}],
                     relationship: [{ required: true, trigger: "change", message: "与老人关系" ,}],
                     cohabit:[{ required: true, trigger: "change", message: "是否同住" ,}],
                     first:[{ required: true, message: "是否第一联系人", trigger: "change",}],
                     contactName:[{ required: true, message: "联系人姓名",trigger: "blur",}],
                     contactNumber:[{  required: true, trigger: "blur", message: "联系人电话" }],

                 },
                 cohabit:[
                     {
                         value: false,
                         label: '否'
                     }, {
                         value: true,
                         label: '是'
                     },
                 ],
                 firsts:[
                     {
                         value: false,
                         label: '否'
                     }, {
                         value: true,
                         label: '是'
                     },
                 ]


             }
        },
        created(){
            for(var i=0;i<this.dictionary.length;i++){

                if(this.dictionary[i].mark=="relationship"){
                    this.relationships=(this.dictionary[i].childs)

                }

            }
            this.search()
        },
        methods:{
            handleadd(id,data){
                    this.id=id
                 if(id>0){
                     console.log(data)
                     this.form={...data}
                     this.isfrist=true
                 }else {
                     this.isfrist=false
                     this.form={
                         contactName:"",
                         contactNumber:"",
                         elderlyCode:"",
                         first:"",
                         relationship:"",
                         age:"",//年龄
                         remark:"",//备注
                         cohabit:"",//是否同住
                         remake:"",//备注
                     }
                 }
                this.dialogFormVisible=true
            },
            close(){
                this.dialogFormVisible=false
            },
            save(){
                this.form.elderlyCode=this.elderlyCode
                console.log(this.list)

                if(this.elderlyCode) {
                    this.$refs["form"].validate(async (valid) => {
                        if (valid) {
                            if(this.id>0){
                                console.log(this.form)
                                const {code} = await resvre(this.form);
                                console.log(code)
                                if (code == 200) {
                                    this.$message({
                                        message: "修改成功",
                                        type: 'success'
                                    })
                                    this.dialogFormVisible=false
                                    this.search()
                                } else {

                                }

                            }else {
                                if (this.elderlyCode == "") {
                                    this.$message({
                                        message: "请先填写基本信息",
                                        type: 'warning'
                                    })
                                } else {



                                            const {code} = await add(this.form);
                                            if (code == 200) {
                                                this.$message({
                                                    message: "添加成功",
                                                    type: 'success'
                                                })
                                                this.search()

                                                this.dialogFormVisible=false
                                            } else {

                                            }

                                    }

                            }



                        } else {
                            return false;
                        }
                    });
                }



            },
            search(){

                console.log(this.elderlyCode)
                if(this.elderlyCode){
                    let elderlyCode=this.elderlyCode
                    search({elderlyCode}).then(res =>{
                        console.log(res)
                        this.list=res.data

                    })
                }else {

                }


            },
            closeDialog(){
                this.$refs['form'].resetFields();
            },
            doDelete(index,row) {
                let elderlyCode=row.elderlyCode
                let contactNumber=row.contactNumber

                console.log(row)
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {code, msg } = await del(({elderlyCode,contactNumber}));
                        if(code==200){
                            this.$baseMessage("删除成功");
                            // this.$parent.familymember()
                            this.search()
                        }else {
                            this.$baseMessage("删除失败");
                        }
                    });
                }
            },

        },
    }
</script>

<style scoped>

</style>
